<template>
  <view class="gi-list-item" :class="props._class" :style="props._style" @click="emit('click')">
    <view class="gi-list-item__header" :style="props.headerStyle">
      <view class="gi-list-item__title-wrap">
        <view class="gi-list-item__status" :class="{ 'margin-r': slot.status }">
          <slot name="status"></slot>
        </view>
        <view class="gi-list-item__title ellipsis" :class="props.titleClass">
          <slot name="title">{{ props.title }}</slot>
        </view>
      </view>
      <view class="gi-list-item__extra">
        <slot name="extra">{{ props.extra }}</slot>
      </view>
    </view>
    <view
      v-if="props.description"
      class="gi-list-item__description ellipsis-2"
      :class="descriptionClass"
    >
      {{ props.description }}
    </view>
    <view v-if="slot.default" class="gi-list-item__body">
      <view class="gi-list-item__body-content">
        <slot></slot>
      </view>
    </view>
    <view v-if="slot.footer" class="gi-list-item__footer" @click.stop>
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script lang="ts" setup>
import type { CSSProperties, PropType } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  titleClass: {
    type: String,
    default: '',
  },
  extra: {
    type: String,
    default: '',
  },
  description: {
    type: String,
    default: '',
  },
  _class: {
    type: String,
    default: '',
  },
  _style: {
    type: Object as PropType<CSSProperties>,
    default: () => ({}),
  },
  headerStyle: {
    type: Object as PropType<CSSProperties>,
    default: () => ({}),
  },
  descriptionClass: {
    type: String,
    default: '',
  },
})

const emit = defineEmits<{
  (e: 'click'): void
}>()

const slot = useSlots()
</script>

<style lang="scss" scoped>
.gi-list-item {
  position: relative;
  padding: $padding;
  margin: 0 $margin $margin;
  overflow: hidden;
  background-color: #fff;
}

.gi-list-item__header {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  .gi-list-item__title-wrap {
    display: flex;
    flex: 1;
    align-items: baseline;
    overflow: hidden;
  }
  .gi-list-item__title {
    overflow: hidden;
    font-size: 15px;
    font-weight: 500;
    color: $color-text-1;
  }
  .gi-list-item__status {
    &.margin-r {
      margin-right: 4px;
    }
  }
  .gi-list-item__extra {
    flex-shrink: 0;
    margin-left: 10px;
    font-size: 12px;
    color: $color-text-4;
  }
}

.gi-list-item__description {
  margin-bottom: 5px;
  font-size: 14px;
  color: $color-text-3;
  word-wrap: break-word;
}

.gi-list-item__body {
  box-sizing: border-box;
  overflow: hidden;
  .gi-list-item__body-content {
    box-sizing: border-box;
    padding: $padding;
    background-color: #f5f7fb;
  }
}

.gi-list-item__footer {
  display: flex;
  align-items: center;
  justify-content: end;
  margin-top: $margin;
}
</style>
